<script setup>
import { reactive, onMounted, ref } from "vue";
// 导出获取用户列表接口
import {
    getAdminList,
    getRole,
    getRoleList,
    roleUpdate,
    delAdmin,
    editAdminRole,
    addAdminRole
} from '../../api/index'

// 导入 element plus的 用户确认框
import { ElMessageBox,ElMessage } from 'element-plus'
const listQuery = reactive({
    pageNum: 1,
    pageSize: 10,
    keyword: null
})
// 用户列表的数据
var adminList = reactive({
    list: null,
    roleList: null,
    dialogVisible: false,
    adminRoleList: [],
    FormDialogVisible: false,
    roleAdmin: {
        createTime: "2018-09-29T05:55:30.000+00:00",
        email: "test@qq.com",
        icon: "http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/timg.jpg",
        id: 1,
        loginTime: "2018-09-29T05:55:39.000+00:00",
        nickName: "测试账号",
        note: null,
        password: "$2a$10$NZ5o7r2E.ayT2ZoxgjlI.eJ6OEYqjH7INR/F.mXDbjZJi9HF0YCVG",
        status: 1,
        username: "test"
    },
    roleAdminAdd : {
        createTime: "",
        email: "",
        icon: "",
        loginTime: "",
        nickName: "",
        note: null,
        password: "",
        status: 0,
        username: ""
    }
})
// 重置事件
const agin = () => {
    listQuery.keyword = null;
}
var total = ref(0);
// 获取列表
const serchList = () => {
    // console.log(listQuery);
    getAdminList(listQuery).then(res => {
        console.log(res.data.data);
        // 数据赋值
        adminList.list = res.data.data.list;
        res.data.data.list.forEach(item => {
            item.status = Boolean(item.status)
        })
        total.value = res.data.data.total;
    })
}

const getRoleListWait = () => {
    getRoleList().then(res => {
        adminList.roleList = res.data.data;
        console.log(adminList.roleList);
    })
}
onMounted(() => {console.log(123);
    serchList();
    getRoleListWait();
})

const sizeChange = (e) => {
    // 变化后让每一页显示的条目变化,并且从后端重新取值
    listQuery.pageSize = e;
    serchList();
}
let adminId = ref(-1)

// 获取用户角色的数据
const getAdminRole = (item) => {
    adminList.adminRoleList = [];
    adminId.value = item.id;
    getRole(item.id).then(res => {
        res.data.data.forEach(item => {
            adminList.adminRoleList.push(item.id)
        })
        // 显示遮罩层
        adminList.dialogVisible = true;
    })
}

const submitRole = () => {
    // 创建表单数据
    let formData = new FormData();
    formData.append('adminId', adminId.value)
    formData.append('roleIds', String(adminList.adminRoleList))
    // 分权限
    roleUpdate(formData);
}

// 删除管理员接口
const delRole = (id) => {
    ElMessageBox.confirm('是否删除该用户', '提示', {
        "show-cancel-button": true,
        "show-confirm-button": true,
        cancelButtonText: '关闭',
        confirmButtonText: "确定",
        confirmButtonClass: 'confirmBtn',
        callback: function (res) {
            if (res == 'confirm') {
                delAdmin(id)
            }
        }
    })
}

// 定义一个当前的用户对象

const editRole = (row) => {
    adminList.FormDialogVisible = true;
    let adminObj = JSON.parse(JSON.stringify(row));
    adminObj.status = Number(adminObj.status)
    // 让当前点击的用户 赋值给初始化的值
    adminList.roleAdmin = adminObj;
}

// 编辑用户
const editRoleAdmin = () => {
    ElMessageBox.confirm('是否对该用户进行编辑操作', '提示', {
        "show-cancel-button": true,
        "show-confirm-button": true,
        cancelButtonText: '关闭',
        confirmButtonText: "确定",
        confirmButtonClass: 'confirmBtn',
        callback: function (res) {
            if (res == 'confirm') {
                editAdminRole(adminList.roleAdmin)
            }
        }
    })
}

const addRoleAdmin = () => {
    // console.log(adminList.roleAdminAdd);
    addAdminRole(adminList.roleAdminAdd).then(res => {
        if(res.data.code != 200){
            ElMessage.error(res.data.message)
        }
    })
}
</script>

<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
                <el-button style="float:right" type="primary" size="small" @click="serchList">
                    查询搜索
                </el-button>
                <el-button style="float:right;margin-right: 15px" size="small" @click="agin">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" size="small" label-width="140px">
                    <el-form-item label="输入搜索：">
                        <el-input class="input-width" v-model="listQuery.keyword" placeholder="帐号/姓名" clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
            <el-button class="btn-add" @click="adminList.addFormDialogVisible = true" size="small">
                添加
            </el-button>
        </el-card>
        <el-table :data="adminList.list" style="width: 100%" border>
            <el-table-column prop="id" label="编号" width="90" align="center" />
            <el-table-column prop="username" label="账号" width="200" align="center" />
            <el-table-column prop="nickName" label="姓名" width="100" align="center" />
            <el-table-column prop="email" label="邮箱" width="150" align="center" />
            <el-table-column label="添加时间" width="200" align="center">
                <template #default="scope">
                    <span>
                        {{ new Date(scope.row.createTime).toLocaleDateString() }}
                        {{ new Date(scope.row.createTime).toLocaleTimeString() }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="最后登录" width="200" align="center">
                <template #default="scope">
                    <span>
                        {{ new Date(scope.row.loginTime).toLocaleDateString() }}
                        {{ new Date(scope.row.loginTime).toLocaleTimeString() }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="是否启用" width="200" align="center">
                <template #default="scope">
                    <div>
                        <el-switch v-model="scope.row.status" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <div>
                        <el-button type="text" @click="getAdminRole(scope.row)">分配角色</el-button>
                        <el-button type="text" @click="editRole(scope.row)">编辑</el-button>
                        <el-button type="text" @click="delRole(scope.row.id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-pagination background v-model:current-page="listQuery.pageNum" v-modle:page-size="listQuery.pageSize"
                :page-sizes="[5, 10, 15, 20]" :total="total" layout="total, sizes, prev, pager, next, jumper"
                @size-change="sizeChange">

            </el-pagination>
        </el-row>

        <el-dialog v-model="adminList.dialogVisible" title="分配角色" width="30%">
            <el-select v-model="adminList.adminRoleList" multiple filterable allow-create default-first-option
                :reserve-keyword="false" placeholder="请分配角色">
                <el-option v-for="item in adminList.roleList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="adminList.dialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="submitRole">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="adminList.FormDialogVisible" title="编辑用户" width="30%">
            <el-form :label-position="'right'" label-width="100px" :model="adminList.roleAdmin" style="max-width: 460px">
                <el-form-item label="账号:">
                    <el-input v-model="adminList.roleAdmin.username" />
                </el-form-item>
                <el-form-item label="姓名:">
                    <el-input v-model="adminList.roleAdmin.nickName" />
                </el-form-item>
                <el-form-item label="邮箱:">
                    <el-input v-model="adminList.roleAdmin.email" />
                </el-form-item>
                <el-form-item label="密码:">
                    <el-input v-model="adminList.roleAdmin.password" type="password" />
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input v-model="adminList.roleAdmin.note" type="textarea" />
                </el-form-item>
                <el-form-item label="是否启用:">
                    <el-radio-group v-model="adminList.roleAdmin.status" class="ml-4">
                        <el-radio :label="1" size="large">是</el-radio>
                        <el-radio :label="0" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="adminList.FormDialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="editRoleAdmin">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="adminList.addFormDialogVisible" title="添加用户" width="40%">
            <el-form :label-position="'right'" label-width="100px" :model="adminList.roleAdminAdd" style="max-width: 460px">
                <el-form-item label="账号:">
                    <el-input v-model="adminList.roleAdminAdd.username" />
                </el-form-item>
                <el-form-item label="姓名:">
                    <el-input v-model="adminList.roleAdminAdd.nickName" />
                </el-form-item>
                <el-form-item label="邮箱:">
                    <el-input v-model="adminList.roleAdminAdd.email" />
                </el-form-item>
                <el-form-item label="密码:">
                    <el-input v-model="adminList.roleAdminAdd.password" type="password" />
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input v-model="adminList.roleAdminAdd.note" type="textarea" />
                </el-form-item>
                <el-form-item label="是否启用:">
                    <el-radio-group v-model="adminList.roleAdminAdd.status" class="ml-4">
                        <el-radio :label="1" size="large">是</el-radio>
                        <el-radio :label="0" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="adminList.addFormDialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="addRoleAdmin">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss">
.filter-container,
.operate-container {
    margin-bottom: 15px;
    position: relative;

    .btn-add {
        position: absolute;
        right: 15px;
    }
}

.confirmBtn {
    background-color: #ff0000 !important;
}
</style>